<template>
  <div class="muscle_diagram" v-if="sinewReportList.length > 0">
    <div class="top_flag flex">
      <div class="flex-center-center">
        <div class="shape1 flag_item1"></div>
        <div class="top_flag_text">{{ i18n.t('muscle_balance_1001') }}</div>
      </div>
      <div class="flex-center-center flag_item">
        <div class="shape2"></div>
        <div class="top_flag_text">{{ i18n.t('muscle_balance_1002') }}</div>
      </div>
    </div>
    <img
      class="body_img"
      :src="require(`@/assets/images/eight_electrodes_report/icon_body_${this.gender}.png`)"
    />
    <img
      class="muscle_line muscle_line_left_top"
      src="@/assets/images/eight_electrodes_report/muscle_line.png"
    />
    <img
      class="muscle_line muscle_line_right_top"
      src="@/assets/images/eight_electrodes_report/muscle_line.png"
    />
    <img
      class="muscle_line muscle_line_left_middle"
      src="@/assets/images/eight_electrodes_report/muscle_line_big.png"
    />
    <img
      class="muscle_line muscle_line_left_bottom"
      src="@/assets/images/eight_electrodes_report/muscle_line.png"
    />
    <img
      class="muscle_line muscle_line_right_bottom"
      src="@/assets/images/eight_electrodes_report/muscle_line.png"
    />
    <div class="muscle_item left_upper_limp"></div>
    <!-- 左上肢 -->
    <div class="muscle_item left_upper_limp">
      <div class="muscle_item_top">
        <img
          src="@/assets/images/eight_electrodes_report/left_upper_limp.png"
          class="muscle_item_top_icon"
        />
        <div
          class="muscle_item_top_tag"
          :style="{ background: getLevelsIndex(0) }"
        >
          {{ i18n.t(sinewReportList[0].levelIndexName) }}
        </div>
      </div>
      <p class="muscle_item_top_text">{{ i18n.t(sinewReportList[0].name) }}</p>
      <div class="standard_ratio align-items-center">
        <div class="shape1"></div>
        <div class="">{{ sinewReportList[0].progress }}%</div>
      </div>
      <div class="fat flex align-items-center">
        <div class="shape2"></div>
        {{ sinewReportList[0].value }}{{ sinewReportList[0].unit }}
      </div>
    </div>
    <!-- 右上肢 -->
    <div class="muscle_item right_upper_limp align-items-end">
      <div class="muscle_item_top">
        <div
          class="muscle_item_top_tag right_angle_right_bottom"
          :style="{ background: getLevelsIndex(1) }"
        >
          {{ i18n.t(sinewReportList[1].levelIndexName) }}
        </div>
        <img
          src="@/assets/images/eight_electrodes_report/right_upper_limp.png"
          class="muscle_item_top_icon"
        />
      </div>
      <p class="muscle_item_top_text text-align">{{ i18n.t(sinewReportList[1].name) }}</p>
      <div class="standard_ratio align-items-center">
        <div class="shape1"></div>
        {{ sinewReportList[1].progress }}%
      </div>
      <div class="fat flex align-items-center">
        <div class="shape2"></div>
        {{ sinewReportList[1].value }}{{ sinewReportList[1].unit }}
      </div>
    </div>
    <!-- 躯干 -->
    <div class="muscle_item center_limp">
      <div class="muscle_item_top">
        <img
          src="@/assets/images/eight_electrodes_report/center_limp.png"
          alt=""
          class="muscle_item_top_icon"
        />
        <div
          class="muscle_item_top_tag"
          :style="{ background: getLevelsIndex(2)}"
        >
          {{ i18n.t(sinewReportList[2].levelIndexName) }}
        </div>
      </div>
      <p class="muscle_item_top_text">{{ i18n.t(sinewReportList[2].name) }}</p>
      <div class="standard_ratio align-items-center">
        <div class="shape1"></div>
        {{ sinewReportList[2].progress }}%
      </div>
      <div class="fat flex align-items-center">
        <div class="shape2"></div>
        {{ sinewReportList[2].value }}{{ sinewReportList[2].unit }}
      </div>
    </div>
    <!-- 左下肢 -->
    <div class="muscle_item left_lower_limp">
      <div class="muscle_item_top">
        <img
          src="@/assets/images/eight_electrodes_report/left_lower_limp.png"
          alt=""
          class="muscle_item_top_icon"
        />
        <div
          class="muscle_item_top_tag"
          :style="{ background: getLevelsIndex(3) }"
        >
          {{ i18n.t(sinewReportList[3].levelIndexName) }}
        </div>
      </div>
      <p class="muscle_item_top_text">{{ i18n.t(sinewReportList[3].name) }}</p>
      <div class="standard_ratio align-items-center">
        <div class="shape1"></div>
        {{ sinewReportList[3].progress }}%
      </div>
      <div class="fat align-items-center flex">
        <div class="shape2"></div>
        {{ sinewReportList[3].value }}{{ sinewReportList[3].unit }}
      </div>
    </div>
    <!-- 右下肢 -->
    <div class="muscle_item right_lower_limp align-items-end">
      <div class="muscle_item_top">
        <div
          class="muscle_item_top_tag right_angle_right_bottom"
          :style="{ background: getLevelsIndex(4)}"
        >
          {{ i18n.t(sinewReportList[4].levelIndexName) }}
        </div>
        <img
          src="@/assets/images/eight_electrodes_report/right_lower_limp.png"
          alt=""
          class="muscle_item_top_icon"
        />
      </div>
      <p class="muscle_item_top_text text-align">{{ i18n.t(sinewReportList[4].name) }}</p>
      <div class="standard_ratio align-items-center">
        <div class="shape1"></div>
        {{ sinewReportList[4].progress }}%
      </div>
      <div class="fat flex align-items-center">
        <div class="shape2"></div>
        {{ sinewReportList[4].value }}{{ sinewReportList[4].unit }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { calcUnitValue, calcUnit } from '@/assets/ts/eight_electrodes_report/Util'
import { TypedScaleData } from '@yolanda-qn/eight-electrodes-report-lib/dist/types/src/typings'
import getMeasureData,{ consts, ReportItem, version } from '@yolanda-qn/eight-electrodes-report-lib'
@Component({})
export default class extends Vue {
  @Prop() measureData!: TypedScaleData
  @Prop() weight_unit!: consts.WeightUnitEnum
  sinewReportList: Record<string, any>[] = []
  gender = 'male'
  mounted() {
    this.getReportDetail()
    this.gender = this.measureData.gender === 1 ? 'male' : 'female'
  }
  getReportDetail() {
     const ReportIdsMapping = consts.ReportBuilderIdsEnum
     const sinewReportList = getMeasureData(this.measureData,
     {
       builderIds:[
        ReportIdsMapping.SinewLeftArm,
        ReportIdsMapping.SinewRightArm,
        ReportIdsMapping.SinewTrunk,
        ReportIdsMapping.SinewLeftLeg,
        ReportIdsMapping.SinewRightLeg,
        ]
      }).map(item => item.toObject());
    const {
      sinew_left_leg,
      sinew_left_arm,
      sinew_trunk,
      sinew_right_arm,
      sinew_right_leg,
    } = this.measureData
    const sinewValue = [
      sinew_left_arm,
      sinew_right_arm,
      sinew_trunk,
      sinew_left_leg,
      sinew_right_leg,
    ]
    sinewReportList.forEach((item, index) => {
      item.progress = item.value as any
      const reportItem = new ReportItem()
      reportItem.setValue(sinewValue[index])
      reportItem.setIsNeedTransformWeightValueByUnit(true)
      reportItem.setUnitValue(this.weight_unit)
      const reportItemObject = reportItem.toObject()
      item.value = reportItemObject.value
      item.unit = reportItemObject.unit
      // 对st_lb展示格式处理一下
      if (this.weight_unit === consts.WeightUnitEnum.st_lb) {
        item.value = `${item.value}`.replace(':', 'st.') + 'lb';
        item.unit = '';
      }
    })
    this.sinewReportList = sinewReportList
  }
  getLevelsIndex(index:number){
    // console.log(this.sinewReportList[index])
    this.sinewReportList[index].levels[this.sinewReportList[index].levelIndex].color
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
@import '../index.scss';
.muscle_diagram {
  .top_flag {
    width: 100%;
    align-items: center;
    font-size: rem(22);
    margin-bottom: rem(60);
    .flag_item1 {
      margin-left: rem(6);
    }
    .flag_item {
      margin-left: rem(18);
    }
    .top_flag_text {
      margin-left: rem(10);
    }
  }
  position: relative;
  .body_img {
    height: rem(696);
    width: rem(250);
    margin-left: rem(203);
  }
  .muscle_line {
    height: rem(29);
    width: rem(176);
    position: absolute;
  }
  .muscle_line_left_top {
    left: rem(80);
    top: rem(218);
  }
  .muscle_line_right_top {
    right: rem(80);
    top: rem(218);
    transform: rotateY(180deg);
  }
  .muscle_line_left_middle {
    height: rem(93);
    width: rem(249);
    left: rem(77);
    top: rem(370);
  }
  .muscle_line_left_bottom {
    width: rem(216);
    left: rem(76);
    bottom: rem(66);
  }
  .muscle_line_right_bottom {
    width: rem(216);
    right: rem(76);
    bottom: rem(66);
    transform: rotateY(180deg);
  }
  .muscle_item {
    position: absolute;
    display: flex;
    flex-direction: column;
    .muscle_item_top {
      display: flex;
      .muscle_item_top_icon {
        display: block;
        width: rem(36);
        height: rem(36);
      }
      .muscle_item_top_tag {
        margin: rem(0) rem(10);
        padding: 0 rem(10);
        height: rem(24);
        font-size: rem(16);
        line-height: rem(24);
        color: white;
        margin-top: rem(5);
        border-radius: rem(16) rem(16) rem(16) 0;
        &.right_angle_right_bottom {
          border-radius: rem(16) rem(16) 0 rem(16);
        }
      }
    }
    .muscle_item_top_text {
      height: rem(33);
      line-height: rem(33);
      font-size: rem(24);
      font-weight: 500;
      color: #2a2e31;
      margin: rem(1) rem(45);
      width: rem(220);
      @include text-overflow;
    }
    .standard_ratio {
      width: fit-content;
      color: rgba(144, 144, 144, 1);
      font-size: rem(22);
      line-height: rem(30);
      height: rem(30);
      margin-top: rem(10);
      padding-bottom: rem(15);
      border-bottom: rem(2) dashed rgba(204, 204, 204, 1);
    }
    .fat {
      width: fit-content;
      color: rgba(144, 144, 144, 1);
      font-size: rem(22);
      line-height: rem(30);
      height: rem(30);
      margin-top: rem(10);
    }
  }
  .left_upper_limp {
    top: rem(70);
    left: rem(9);
  }
  .right_upper_limp {
    top: rem(70);
    right: rem(9);
  }
  .center_limp {
    top: rem(280);
    left: rem(9);
  }
  .left_lower_limp {
    bottom: rem(100);
    left: rem(9);
  }
  .right_lower_limp {
    bottom: rem(100);
    right: rem(0);
  }
}
.shape1 {
  width: rem(16);
  height: rem(16);
  background-color: #9bde56;
  margin-right: rem(12);
}
.shape2 {
  width: rem(16);
  height: rem(16);
  border-radius: rem(8);
  background-color: #85b5ec;
  margin-right: rem(12);
}
</style>
